<template>
	<div class="content">
		<div class="content1">
			<p>定位/附近城市</p>
			<div class="list">
				<span @click='change(data.location.city_name)'>{{data.location.city_name}}</span>
			</div>
		</div>
		<div class="content1">
			<p>已开通周边游站点</p>
			<div class="list">
				<span v-for='item in data.sites' @click='change(item.name)'>{{item.name}}</span>
			</div>
		</div>
		<div class="content1">
			<p>热门玩乐城市</p>
			<div class="list">
				<span v-for='item in data.citys' @click='change(item.name)'>{{item.name}}</span>
			</div>
		</div>
	</div>
</template>
<script>
import { mapMutations } from 'vuex'
	export default{
		props:['data'],
		mounted(){
			console.log(this.data)
		},
		methods:{
			change(itemName){
				this.commitCity(itemName);
				this.$router.push('/')
			},
			...mapMutations(['commitCity'])
		}
	}
</script>
<style lang="stylus" scoped>
	.content{
		width: 100%;
		padding:0 .26rem;
	}
	.content1{
		width: 100%;
		p{
			font-size: .45rem;
			color: #bbb;
			padding-top: .5rem;
			padding-left: .3rem;
		}
	}
	.list{
		width: 100%;
		overflow:hidden;
		span{
			width: 22%;
			font-size: .37rem;
			padding:.2rem 0;
			margin-top: .26rem;
			border:1px solid #999;
			text-align: center;
			border-radius: .21rem;
			color: #999;
			float: left;
			margin-left: 3%;
		}
	}
</style>